<template>
	<view>
		<view class="indexTop"></view>
		<view class="father">
			<view class="left" ref="left_navigation">
				<text style="color:#333333;font-size:110%;">基础节点</text>
				<view class="btn" @touchstart="drag_start" @touchmove.prevent="drag_hmove" @touchend="drag_end">
					<text class="icon">⚠️</text>数据接入
				</view>
				<view class="btn" @touchstart="drag_start" @touchmove.prevent="drag_hmove_2" @touchend="drag_end">
					<text class="icon">⚠️</text>接口调用
				</view>
			</view>
			<movable-area>
				<view class="btn" style="position: fixed;width: 280rpx;" :style="'left:'+moveX+'px;top:'+moveY+'px;display:'+btn_type" mode="aspectFit">
					<text class="icon">⚠️</text>数据接入
				</view>
				<movable-view :x="x" :y="y" direction="all" @change="onChange">
					<view></view>
					结点A
				</movable-view>
				<movable-view :x="xx" :y="yy" direction="all" @change="onChange">
					结点B
				</movable-view>
			</movable-area>
			<view class="right">
				<view class="edit">编辑节点</view>
				<view>
					<view>类型</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btn_type: 'none',
				start:[0,0],
				moveY:0,
				moveX:0,
				windowWidth:'',
				windowHeight:'',
				x: 30,
				y: 100,
				xx: 300,
				yy: 520,
				old: {
					x: 0,
					y: 0
				}
			}
		},
		onShow() {
			const { windowWidth, windowHeight } = uni.getSystemInfoSync();  
			this.windowWidth = windowWidth;
			this.windowHeight = windowHeight;
		},
		methods: {
			dragger: function(e){
				this.moveX = 100
				this.moveY = 100
			},
			tap: function(e) {
				// 解决view层不同步的问题
				this.x = this.old.x
				this.y = this.old.y
				this.$nextTick(function() {
					this.x = 30
					this.y = 30
				})
			},
			onChange: function(e) {
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			},
			drag_start: function(event) {
				this.start[0]= event.touches[0].clientX-event.target.offsetLeft;
				this.start[1]= event.touches[0].clientY-event.target.offsetTop;
			},
			drag_hmove(event){
				let tag = event.touches;
				if(tag[0].clientX < 0 ){
					tag[0].clientX = 0
				}
				if(tag[0].clientY < 0 ){
					tag[0].clientY = 0
				}
				if(tag[0].clientX > this.windowWidth ){
					tag[0].clientX = this.windowWidth
				}
				if(tag[0].clientY > this.windowHeight ){
					tag[0].clientY = this.windowHeight
				}
				this.btn_type = '';
				this.moveX = tag[0].clientX-this.start[0];
				this.moveY = tag[0].clientY-this.start[1];
			},
			drag_end(event){
				if(this.moveX >= (this.windowWidth * 0.2)) {
					/*
						这里需要实现一个插入view组件的功能
						需要搭配for循环嵌入
					*/
				   
				}
				this.btn_type = 'none';
				this.moveX = 0;
				this.moveY = 0;
			}
		}
	}
</script>
 
<style>
	.btn {
		border: #808080 dashed 2rpx;
		border-radius: 15rpx;
		width: 70%;
		margin: 10rpx 10rpx 10rpx 25rpx;
		padding: 10rpx;
	}
	.icon {
		margin: 0 12rpx 0 12rpx;
	}
	.father {
		border: #808080 solid 2rpx;
		border-width: 1rpx 0 1rpx 0;
		height: 96vh;
		display: flex;
	}
	.left {
		padding: 15rpx;
		border-right: #808080 solid 2rpx;
		display: block;
		width: 20%;
		color: #000;
	}
	.right {
		border-left: #808080 solid 2rpx;
		width: 20%;
		display: block;
		color: #000;
	}
	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 18rpx;
		height: 75rpx;
		width: 240rpx;
		border: #808080 solid 2rpx;
		color: #808080;
	}
 
	movable-area {
		width: 60%;
		height: 100%;
		background-color: #fff;
		overflow: hidden;
	}
	.indexTop {
		height: 50rpx;
	}
	
	.edit {
		color:#333333;
		font-size:110%;
		padding: 10rpx;
		width: 100%;
		background-color: rgba(128,128,128,.2);
		border-bottom:#808080 solid 2rpx;
	}
</style>